<template>
    <el-dialog v-model="fromParam.modal" width="480" :title="`${params.Id ? '修改' : '新增'}角色`" @close="Close">
        <el-form ref="rulesForm" :model="params" :rules="rules" label-width="100">
            <el-form-item label="角色名称:" prop="Name">
                <el-input type="text" v-model.trim="params.Name" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="角色描述:">
                <el-input type="textarea" v-model.trim="params.Desc" placeholder="请输入">
                </el-input>
            </el-form-item>
            <el-form-item label="角色等级:">
                <el-input-number type="number" v-model.trim="params.Sort" placeholder="请输入"></el-input-number>
            </el-form-item>
            <el-form-item label="状态:">
                <el-radio-group v-model="params.Enable">
                    <el-radio v-for="state in ENABLE_STATE" :label="state[0]">
                        {{ state[1] }}
                    </el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="Close">取消</el-button>
            <el-button type="primary" @click="UpdateOrCreate" :loading="editRoleLoading">提交</el-button>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';
import { FormInstance, FormRules } from 'element-plus';
import { PermessionRole } from './Def';
import { RoleApi } from '@/api/permession/role';
import { ENABLE_STATE } from "./ConfigData"
import MessageUti from "@/library/utils/MessageUti"

const props = defineProps<{
    fromParam: PermessionRole.EditingDialog,
    GetData: () => void
}>()

const rulesForm = ref<FormInstance>();
const rules = ref<FormRules<PermessionRole.ParamsState>>({
    Name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }]
})

const defaultParams: PermessionRole.ParamsState = {
    Id: undefined,
    Enable: true,
    Sort: 0,
    Name: '',
    Desc: ''
}

const editRoleLoading = ref(false)
const params = ref<PermessionRole.ParamsState>({ ...defaultParams })

watch(() => props.fromParam.params, (val) => {
    params.value = { ...val }
})

const UpdateOrCreate = async () => {
    if (!rulesForm.value) return

    await rulesForm.value.validate((valid) => {
        if (valid) {
            editRoleLoading.value = true
            const Api = params.value.Id ? RoleApi.UpdateRole : RoleApi.InsertRole

            Api({ ...params.value })
                .then(
                    () => {
                        MessageUti.showSuccess(`${params.value.Id ? "编辑" : "新增"}成功`)
                        props.GetData()
                        Close()
                    },
                    () => { })
                .finally(() => {
                    editRoleLoading.value = false
                })
        }
    })
}

const Close = () => {
    props.fromParam.modal = false
    rulesForm.value?.resetFields()
    params.value = { ...defaultParams }
}

</script>

<style scoped></style>